<template>
  <div> 
    <city-header></city-header>
    <city-search :cities="cities"></city-search>
    <city-list :hot="hotCities" :citiesList="cities" :letter="msg"></city-list>
    <city-alphabet :alphabet="cities"  @change="getAlpha"></city-alphabet>
    <!-- <city-alphabet :alphabet="cities"  @sendAlpha="getAlpha"></city-alphabet> -->
  </div>
</template>
<script>
import axios from "axios"
import CityHeader from "./components/Header"
import CitySearch from "./components/Search"
import CityList from "./components/List"
import CityAlphabet from "./components/Alphabet"
export default {
    name:'City',
    data(){
        return{
            cities:{},
            hotCities:[],
            msg:"",
        }
    },
    components:{CityHeader,CitySearch,CityList,CityAlphabet},
    methods:{
        getCityInfo(){
            axios.get("/api/city.json").then((res)=>{
                const data=res.data
                if(data.ret==true && data.data){
                    this.hotCities=data.data.hotCities
                    this.cities=data.data.cities
                }
            })
        },
        getAlpha(msg){
            this.msg=msg
        }
    },
    mounted(){
        this.getCityInfo()
    }
}
</script>
<style scoped>
</style>
